<template>
  <div class="page-container">
    <div class="page-header">
     <span class="logout">退出系统</span>
    </div>
    <ul class="page-content">
      <li v-for="(item,index) in routerData" :key="index">
        <p class="tit">{{item.name}}</p>
        <img class="pic" :src="item.img">
        <div class="bot">
          <span class="name">提供方：{{item.com}}</span>
          <a :href="item.href" class="link">进入系统</a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "layout",
  data() {
    return {
      routerData:[
        {
          href:'http://ts.test.vpn/index.html',
          img:require('@/assets/imgs/taishiganzhi.png'),
          name:'态势感知系统',
          com:'蚁坊软件'
        },
        {
          href:'http://sz.test.vpn/index.html',
          img:require('@/assets/imgs/shouzhongfenxi.jpg'),
          name:'受众分析系统',
          com:'星汉数智'
        },
      ]
    };
  },

  created() {
    if(this.$store.getters.userInfo){
      this.userName = this.$store.getters.userInfo.name
    }
  },
  updated() {
   
  },
  methods: {
    
  },
};
</script>
<style lang="scss" scoped>
.page-container{
  width:100%;
  max-width: 1920px;
  height:100vh;
  background:url('../assets/imgs/bg.png') no-repeat center center;
  background-size:cover;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-header{
  width:100%;
  height:115px;
  background:url('../assets/imgs/top.png') no-repeat center center;
  background-size:1250px 115px;
  position: relative;
  margin-bottom:20px;
  .logout{
    padding-left:25px;
    position:absolute;
    top:47px;
    right:40px;
    height:22px;
    font-size:18px;
    color:#fff;
    line-height:22px;
    background:url('../assets/imgs/logout.png') no-repeat left center;
    background-size:20px 22px;
    cursor: pointer;
  }
}
.page-content{
  padding-top: 20px;
  box-sizing: border-box;
  width:1200px;
  flex:1;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-y: auto;
  li{
    width:520px;
    height:400px;
    background:url('../assets/imgs/list_bg.png') no-repeat center;
    background-size:100% 100%;
    margin-bottom:50px;
    box-sizing:border-box;
    padding:5px 20px;
    .tit{
      text-align:center;
      font-size:16px;
      color:#00f6f9;
      font-weight:700;
      line-height:42px;
      margin-bottom:20px;
    }
    .pic{
      display:block;
      margin: 0 auto 20px;
      width:460px;
      height:256px;
    }
    .bot{
      display:flex;
      justify-content: space-between;
      align-items: center;
      padding:0 15px;
      span{
        font-size:14px;
        color:#fff;
        line-height:32px;
      }
      .link{
        font-size:14px;
        color:#fff;
        text-decoration: none;
        height:32px;
        line-height:32px;
        padding:0 15px;
        border-radius:5px;
        background:linear-gradient(to right,#005be9,#009aff);
        cursor: pointer;
      }
    }
  }
}
</style>
